import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import { List, Icon, DatePicker } from 'antd-mobile';
import styles from './setWorkExperience.css';
import moment from 'moment';
import 'moment/locale/zh-cn';
import PopupsRow from '../../../../../../common/popupsRow/PopupsRow';
import Line from '../../../../../../common/borderLine/Line';
import CustBtn from '../../../../../../common/buttons/Btn';

const Item = List.Item

class SetWorkExperience extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      maxEntryTime:'',
      minEntryTime:'',
      maxDimissionTime:'',
      minDimissionTime:'',
      entryTime:'',
      dimissionTime:'',
      workCompany:'',
      workPost:'',
      description:'',
    }
  }

  componentDidMount(){

    const { pageStatus='',entryTime='',dimissionTime='',workCompany='',
      workPost='',description=''} = this.props;

    const {getFieldDecorator, validateFields, getFieldsValue, resetFields, getFieldProps} = this.props.form;

    const now = new Date();
    this.setState({
      minEntryTime: moment('1990-01-01', 'YYYY-MM-DD').utcOffset(8),
      maxEntryTime: moment(now, 'YYYY-MM-DD').utcOffset(8),
      minDimissionTime: entryTime ? moment(entryTime, 'YYYY-MM-DD').utcOffset(8) : moment('1990-01-01', 'YYYY-MM-DD').utcOffset(8),
      maxDimissionTime: moment(now, 'YYYY-MM-DD').utcOffset(8),
      entryTime: entryTime ? moment(entryTime, 'YYYY-MM-DD').utcOffset(8): '',
      dimissionTime: dimissionTime ? moment(dimissionTime, 'YYYY-MM-DD').utcOffset(8) : '',
      workCompany,
      workPost,
      description,
    })

  }

  componentWillReceiveProps(newProps){

    const { entryTime='',dimissionTime='',
    workCompany='',workPost='',description=''} = newProps;

    const stateEntryTime = this.state.entryTime._i;
    let reTime = dimissionTime;
    // console.log('reTime',reTime);
    if(reTime){
      if(stateEntryTime != entryTime){
        reTime = '';
        this.props.saveDimissionTime(reTime);
      }
    }

    this.setState({
      entryTime: entryTime ? moment(entryTime, 'YYYY-MM-DD').utcOffset(8): '',
      dimissionTime: reTime ? moment(reTime, 'YYYY-MM-DD').utcOffset(8) : '',
      workCompany,
      workPost,
      description,
    })

  }

  //入职时间
  onEntryTime(value){
    let nDate = new Date(value);
    let year = nDate.getFullYear();
    let month = nDate.getMonth()+1;
    let day = nDate.getDate();
    if(month < 10){
      month = '0'+month;
    }
    if(day<10) {
      day = '0'+day;
    }
    let nTime = year + "-" + month + "-" + day;
    this.setState({
      minDimissionTime:value,
    })
    this.props.saveEntryTime(nTime);
  }

  //离职时间
  onDimissionTime(value){
    let nDate = new Date(value);
    let year = nDate.getFullYear();
    let month = nDate.getMonth()+1;
    let day = nDate.getDate();
    if(month < 10){
      month = '0'+month;
    }
    if(day<10) {
      day = '0'+day;
    }
    let nTime = year + "-" + month + "-" + day;
    this.props.saveDimissionTime(nTime);
  }

  onSignature(e){
    const value = e.target.value;
    // console.log(value);
    this.props.saveDescription(value)
  }


  render(){
    const { pageStatus,saveWorkCompany,saveWorkPost,onDelete } = this.props;
    const { minEntryTime, maxEntryTime, minDimissionTime, maxDimissionTime,
      entryTime,dimissionTime,workCompany,workPost,description} = this.state;

    const {getFieldDecorator, validateFields, getFieldsValue, resetFields, getFieldProps} = this.props.form;

    //公司名称
    const companyProps = {
      popupsHead:'请填写公司名称',
      labelName:'公司名称',
      PopupsDefaults: workCompany ? workCompany : '',
      displayDefaults:  workCompany ? workCompany : "请填写" ,
      onSave(value){
        if (value) {
          saveWorkCompany(value);
        }
      }
    }

    //工作岗位
    const jobProps = {
      popupsHead:'请填写工作岗位',
      labelName:'工作岗位',
      PopupsDefaults: workPost ? workPost : '',
      displayDefaults:  workPost ? workPost : "请填写",
      onSave(value){
        if (value) {
          saveWorkPost(value);
        }
      }
    }

    const btnProps = {
      textValue:'删除',
      onOk(){
        onDelete()
      },
    }

    return(
      <div>
        <DatePicker
          mode="date"
          title="入职日期"
          extra="请选择"
          value={entryTime}
          onOk={v => this.onEntryTime(v)}
          minDate={minEntryTime}
          maxDate={maxEntryTime}
          >
          <List.Item arrow="horizontal">入职日期</List.Item>
        </DatePicker>
        <Line />
        <DatePicker
          mode="date"
          title="离职日期"
          extra="请选择"
          value={dimissionTime}
          onOk={v => this.onDimissionTime(v)}
          minDate={minDimissionTime}
          maxDate={maxDimissionTime}
          >
          <List.Item arrow="horizontal">离职日期</List.Item>
        </DatePicker>
        <Line />
        <PopupsRow {...companyProps} />
        <Line />
        <PopupsRow {...jobProps} />
        <Line />
        <div className={styles.signature} >
          <div className={styles.signatureLink}>
            工作描述
          </div>
          <textarea
            placeholder="请填写"
            cols="25"
            rows="5"
            className={styles.TextareaItem}
            {...getFieldProps('description',{
              initialValue:description,
              rules: [
                { required: false, message: '' }
              ]
            })}
            onBlur={(e) => this.onSignature(e)}
          />
        </div>
        {pageStatus == 'edit' ? (
          <div className={styles.btn}>
            <CustBtn {...btnProps}/>
          </div>
        ):''}
      </div>
    )
  }
}

const SetWorkExperienceWrapper = createForm()(SetWorkExperience);
export default connect()(SetWorkExperienceWrapper);
